<template>
	<view class="wallet bg-shop  hv100  clearfix ">
		<cu-custom bgColor="bg-white" isBack :class="{'bg-mengceng':choicebox}">
			<block slot="content">结算下单</block>
		</cu-custom>
		<view class="px15 bg-white mt5 py15 flex align-center justify-between">
			<image src="/static/order/address.png" class="addrsspic" ></image>
			<view class="flex wsaddress flex-direction align-start" @click="pushaddress" v-if="selAddress.id==''||selAddress.id==null">
				<text class="ellipsis2 f14 py5 color-black">请选择收货地址</text>
			</view>
			<view class="flex wsaddress flex-direction align-start" v-else @click="pushaddress">
				<view class="flex  py5 align-center wp100 justify-between">
					<text class="f14">{{selAddress.name}}</text>
					<text class="f14">{{selAddress.tel}}</text>
				</view>
				<text class="ellipsis2 f14 py5">{{selAddress.sheng}}{{selAddress.shi}}{{selAddress.xian}}{{selAddress.street}}</text>
			</view>
			<text class="cuIcon-right"></text>
		</view>
		<view class="mt10  bg-white flex flex-direction">
			<view class="flex flex-direction">
				<view class="flex align-center pt15 pb5 px15" v-if="storeId!=0" @click="pushPage('/pages/store/index?id='+storeId)">
					<text class="cuIcon-shop f18"></text>
					<text class="mx5">{{storename}}</text>
					<text class="cuIcon-right f14"></text>
				</view>
				<view class="flex align-center px15  pl20  py20 ">
					<view class="block70  radius-5 discenter"><image :src="goodsInfo.pic" class="block70"></image></view>
					<view class="flex flex-direction align-start justify-between ml15 h70 mworde ">
						<view class="flex flex-direction">
							<text class="ellipsis2 wp100">{{goodsInfo.name}}</text>
							<view class="flex align-center flex-wrap wp100 pr10">
								<view class="" v-for="(item,index) in goodsInfo.cname" :key="index">
									<text class="f12 text-info mt5">{{item.name}}</text>
									<text v-if="index!=goodsInfo.cname.length-1" class="text-info f12">,</text>
								</view>
							</view>
						</view>
						<view class="flex align-center  justify-between wp100">
							<text class="text-prices">￥{{goodsInfo.money}}</text>
							<text class="color-info">X{{goodsInfo.num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-direction bg-white mt10 px15 f14 text-info">
			<view class="flex align-center justify-between mt20">
				<text class="text-info">商品原价：</text>
				<text class="color-info">￥{{cmoney}}</text>
			</view>
			<view class="flex align-center justify-between py10  mt5">
				<text class="text-info">合计：</text>
				<text class="text-black">￥{{countMoney}}</text>
			</view>
			<view class="flex flex-direction mt15 mb15">
				<text class="text-black">买家留言</text>
				<textarea v-model="liuyan" maxlength="120" class="mt10 px10 f14 py10  border-1 text-black h100 wp100" placeholder-class="color-info" placeholder="订单补充说明"></textarea>
			</view>
		</view>
		<view class="flex flex-direction wp100 bg-white mt5 px15 ">
			<view class="py15">选择支付方式</view>
			<view class="flex flex-direction" v-if="ispayconfirm">
				<view class="flex align-center pt10 pb5">
					<image src="/static/order/choice.png" v-if="radio==1" class="block20"></image>
					<image src="/static/order/nochoice.png" @click="radio=1" v-else class="block20"></image>
					<image src="/static/order/weixin@2x.png" class="block25  ml20 mr10" mode=""></image>
					<text class="">微信</text>
				</view>
				<view class="flex align-center pt15 pb5">
					<image src="/static/order/choice.png" v-if="radio==2" class="block20"></image>
					<image src="/static/order/nochoice.png" @click="radio=2" v-else class="block20"></image>
					<image src="/static/order/airpay.png" class="block25  ml20 mr10" mode=""></image>
					<text class="">支付宝</text>
				</view>
				<view class="flex align-center pt15 pb15">
					<image src="/static/order/choice.png" v-if="radio==3" class="block20"></image>
					<image src="/static/order/nochoice.png" @click="radio=3" v-else class="block20"></image>
					<image src="/static/order/yue.png" class="block25  ml20 mr10" mode=""></image>
					<text class="">余额</text>
				</view>
			</view>
		</view>
		<view class="confirm-fenge"></view>
		<view class="confirm-box flex align-center justify-between">
			<view class="flex align-center pl15">
				<text class="text-black ">总计:</text>
				<text class="text-prices ml10 f16">￥{{countMoney}}</text>
			</view>
			<view class="confirm-box-button discenter text-white" v-if="dibuorders" @click="isqueren">立即下单</view>
			<view class="confirm-box-buttons discenter text-black" v-else >立即下单</view>
		</view>
		<!-- mask层 -->
		<view :class="['mask', show ? '' : 'visible']"></view>
		<!-- 密码 -->
		<view :class="['contents', show ? '' : 'contenthide']">
			<view class="title">
				<view class="close" @click="close()"><text class="cuIcon-close"></text></view>
				<view class="center">请输入支付密码</view>
				<view class="close"></view>
			</view>
			<view :class="['code', show ? '' : 'visible']">
				<view class="code-box">
					<block v-for="(item, index) in 6" :key="index">
						<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
					</block>
				</view>
				<!-- <input type="number" v-model="password" /> -->
			</view>			
		</view>
		<!-- 键盘 -->
		<view v-if="show" :class="['keyboard', show ? '' : 'active', isIphoneX ? 'isIphone' : '']">
			<block v-for="(item, index) in 9" :key="index">
				<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
			</block>
			<view class="keyboard-item hide"></view>
			<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
			<view class="keyboard-item delte" @tap="del()"><text class="cuIcon-delete"></text></view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			//支付密码
			show:false,
			isIphoneX:false,
			password:'',
			payPassword:'',
			//
			storename:'',
			storeId:'',
			type:1,//订单类型
			goodsid:'',//商品id
			guigeid:'',//规格id
			ordersn:'',
			//单件商品
			goodsInfo:{
				pic:'',
				name:'',
				money:'',
				num:0,
				cname:[],
				shopname:''
			},
			cmoney:0,//原价
			countMoney:0,//合计金额
			dibuorders:true,	//点击确认按钮时隐藏，防止重复点击
			radio:3,//支付方式
			//选择配送类型和支付类型
			choicebox:false,
			boxtype:0,//展示类型
			paylist:[
				{
					provider: 'wxpay',
					name: '微信',
					icon: '/static/payment/wechat@2x.png'
				},
				{
					provider: 'alipay',
					name: '支付宝',
					icon: '/static/payment/alipay@2x.png'
				},
				],
			liuyan:'',//留言
			//商品类型
			status:'',
			ispayconfirm:false,
			pintuantype:'',
			ptCountId:''
		}
	},
	onLoad(e) {
		this.goodsid=e.id;
		this.pintuantype=e.type
		this.guigeid=e.ggIds
		if(e.type==2){
			this.ptCountId=e.ptCountId
		}
		this.goodsconfirm()
	},
	onHide() {
		this.show=false
	},
	onBackPress() {
		this.show=false
	},
	computed:{
		...mapState(['baseURL','selAddress']),
		allmoeny(){
			return Number(this.countMoney)
		}
	},
	methods: {
		...mapActions([ 'setOrder','setAddress']),
		async goodsconfirm() {
			let params={}
			if(this.pintuantype==1){
				params={
					goodId:this.goodsid,
					ggIds:this.guigeid,
					buyType:this.pintuantype
				}
			}else {
				params={
					goodId:this.goodsid,
					ggIds:this.guigeid,
					buyType:this.pintuantype,
					ptCountId:this.ptCountId
				}
			}
			let { data:{addr,pic,name,money,buyNum,status,ggNames,yuanjia,heji,storeId,storeName,orderSn}} = await this.$http.post('home.addpintuan',params)
			this.goodsInfo.pic=pic
			this.goodsInfo.name=name
			this.goodsInfo.money=money
			this.goodsInfo.num=buyNum
			this.goodsInfo.cname=ggNames
			this.cmoney=yuanjia
			this.countMoney=heji
			this.ordersn=orderSn
			this.status=status
			this.ispayconfirm=true
			// this.storename=storeName
			this.storeId=storeId
			this.setAddress(addr)
		},
		pushaddress(){
			uni.navigateTo({
				url:'/pages/address/index?type='+'select'
			})
		},
		isqueren(){
			if(this.selAddress.id==''||this.selAddress.id==null||this.selAddress.id==undefined){
				uni.showToast({
					title:'请设置收货地址',
					icon:"none"
				})
				return false
			}
			if(this.radio==3){
				this.show=true
			}else{
				this.payOrders()
			}
		},
		key(key) {
			if (this.password.length < 6) {
				this.password += key;
				if (this.password.length == 6) {
					this.payPassword=this.password
					this.payOrder()
				}
			}
		},
		clear() {
			this.password = '';
		},
		close() {
			this.password = '';
			this.trantision = false;
			this.show=false
		},
		del() {
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1);
			}
		},
		async payOrder() {
			try{
				this.dibuorders = false
				//商品结算信息
				let information ={
					addrId:this.selAddress.id,
					desc:this.liuyan,
					orderSn:this.ordersn,
					payType: this.radio,
					payPassword:this.payPassword
				}
				if(this.radio==3){
					if(this.pintuantype==1){
						let { data } = await this.$http.post('order.goodconfirm', information,{ tipConfig: { isSuccessTip: true } })
						setTimeout(() => {
							this.setOrder(2)
							uni.redirectTo({
								url:'/pages/order/index'
							})
						}, 1500);
					}else{
						let { data } = await this.$http.post('home.nowpaypintuan', information,{ tipConfig: { isSuccessTip: true } })
						setTimeout(() => {
							uni.redirectTo({
								url:'/pages/order/pintuanorder'
							})
						}, 1500);
					}
				}else{
					uni.showToast({
						title:'该支付方式暂未开通',
						icon:'none'
					})
					this.dibuorders = true
					return false
				}
			}catch(e){
				this.dibuorders=true
			}
			
		},
		async payOrders() {
			try{
				this.dibuorders = false
				//商品结算信息
				let information ={
					addrId:this.selAddress.id,
					desc:this.liuyan,
					orderSn:this.ordersn,
					payType: this.radio,
				}
				if(this.radio==1){
					if(this.pintuantype==1){
						let { data } = await this.$http.post('order.goodconfirm', information,{ tipConfig: { isSuccessTip: false } })
						this.requestPayment(data)
					}else{
						let { data } = await this.$http.post('home.nowpaypintuan', information,{ tipConfig: { isSuccessTip: false } })
						this.requestPayment(data)
					}
				}
				if(this.radio==2){
					uni.showToast({
						title: '支付方式未开通',
						icon: 'none'
					})
				}
			}catch(e){
				this.dibuorders=true
			}
			
		},
		async requestPayment(data) {
			let provider =''
			if(this.radio==1){
				provider='wxpay'
			}else{
				provider='alipay'
			}
			let [err, res] = await uni.requestPayment({
				provider: provider,
				orderInfo: data
			})
			if (res) {
				this.dibuorders = false
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				})
				if(this.pintuantype==1){
					setTimeout(() => {
						this.setOrder(2)
						uni.redirectTo({
							url:'/pages/order/index'
						})
					}, 1500);
				}else{
					setTimeout(() => {
						uni.redirectTo({
							url:'/pages/order/pintuanorder'
						})
					}, 1500);
				}
			}
			if (err) {
				uni.showToast({
					title: '支付失败!重新支付',
					icon: 'none'
				})
				this.dibuorders = true
			}
		}
	}
}
</script>

<style>
.wsaddress{
	width: calc(100% - 128rpx);
	margin-left: 20rpx;
}
.border-1{
	border: 1rpx solid #F8F8F8;
}
.mworde{
	width: calc(100% - 170rpx);
}
.dibuorder{
	position: fixed;
	z-index: 199;
	bottom: 0;
}
.w100{
	width: 200rpx;
}
.bg-fense{
	background-color: #FFECE5;
	width: 150rpx;
}
.block10{
	width: 20rpx;
	height: 20rpx;
}
.addrsspic{
	width: 32rpx;
	height: 44rpx;
}
.mengceng{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	background-color: #050505;
	opacity: 0.5;
	z-index:131;
}
.bg-mengceng{
	background-color: #050505;
	opacity: 0.5;
}
.choice-box{
	width: 520rpx;
	height:auto;
	position: absolute;
	z-index: 132;
	left: calc(50% - 260rpx);
	top:calc(50vh -  150rpx);
	border-radius: 10px;
}
.choice-line{
	width: 100%;
	height: 1rpx;
	background-color: #edeeef;
}
.py24{
	padding-top: 48rpx;
	padding-bottom: 48rpx;
}
.confirm-box{
	width: 100%;
	height: 110rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
}
.confirm-box-button{
	width: 285rpx;
	height: 110rpx;
	background-color: #FE4725;
}
.confirm-box-buttons{
	width: 285rpx;
	height: 110rpx;
	background-color: #CCCCCC;
}
.confirm-fenge{
	height: 130rpx;
	background-color: #F7F7F7;
}
.yuanjia{
	text-decoration:line-through;
	color: #bfbfbf;
}
</style>
